/* 配色声明 */
@mainColor:#e9432b;//主色调
@auxiliaryColor:#18191b;//辅色调
@secondaryColor:#fff;//次级色调
/* 全局补充样式 */
*{
    font-family: 'Microsoft YaHei';
    ::-webkit-scrollbar {/*滚动条整体样式*/
        width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }
    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 0px;
        background: @auxiliaryColor;
        cursor: pointer;
    }
    ::-webkit-scrollbar-thumb:hover{
        border-radius: 0px;
        background: @mainColor;
    }
    ::-webkit-scrollbar-track {/*滚动条里面轨道*/
        // -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0px;
        background: @secondaryColor;
    }
}
.ant-back-top{
    bottom:170px;
}
body{
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}
.header-anchor{
    visibility: hidden;
    position: absolute;
}
/*                        /layout                       */
// container.vue
#layout-container{
    background:rgba(0,0,0,0);
    position: relative;
    .container{
        background:rgba(0,0,0,0);
        height:100vh;
        float:left;
        padding-left:792px;
        padding-right:96px;
        padding-top:53px;
    }
}
// footer.vue
.footer{
    border-top:1px solid #f4f4f6;
    position: absolute;
    bottom:0;
    width:100%;
    height:72px;
    color:#52555a;
    p{
        font-size: 12px;
        line-height: 72px;
        height:100%;
        float:left;
        color:#a7abb3;
        font-family:Microsoft YaHei;
    }
    .links{
        float:right;
        height:100%;
        line-height: 72px;
        a{
            color:#52555a;
            font-size: 20px;
            margin-right: 10px;
            float: left;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        a:last-child{
            margin-right: 0;
        }
        a:hover{
            color:@mainColor;
        }
    }
}
.footer.home{
    // padding-left:120px;
}
.footer.other{
    // padding:0 132px;
}
// gallery.vue
.gallery{
    background:rgba(0,0,0,0);
    position: relative;
    *{
        font-family: din;
    }
    .container{
        background:rgba(0,0,0,0);
        width:auto;
        overflow-x: scroll;
        overflow-y: hidden;
        height:calc(~'100% - 71px');
        white-space:nowrap;
        .item{
            height:calc(~'100% - 20px');
            width:30%;
            display: inline-block;
            margin-right:2em;
            .article{
                border:0;
                background:rgba(0,0,0,0);
                float:left;
                width:100%;
                height:100%;
                cursor: pointer;
                position: relative;
                .pi-w{
                    position: relative;
                    height:calc(~'100% - 100px');
                    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                    a{
                        display: block;
                        position: absolute;
                        height:100%;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-size: cover;
                        background-position: 50%;
                        z-index: -1;
                        cursor: pointer;
                        // img{
                        //     float: left;
                        //     width: 100%;
                        //     height: 100%;
                        //     object-fit: cover;
                        // }
                    }
                }
                .pi-w:hover{
                    background:rgba(0,0,0,0.5);
                }
                .pi-bottom{
                    padding-top: 10px;
                    position: absolute;
                    width:100%;
                    .h{
                        position: relative;
                        font-size: 14px;
                        padding-left: 10px;
                        padding-right: 15px;
                        line-height: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        margin-right: 30px;
                        border-left:2px solid @auxiliaryColor;
                        transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                    }
                    .b{
                        position: absolute;
                        right: 0px;
                        top: 5px;
                        font-weight: normal;
                        font-size: 19px;
                        color: #a7abb3;
                        text-align: center;
                        transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                    }
                    .h:hover,.b:hover{
                        color:@mainColor;
                    }
                }
            }
            .article:hover{
                box-shadow:0 0 0 rgba(0, 0, 0, 0);
            }
        }
        .item:nth-child(odd){
            .pi-w{
                margin-top: 50px;
            }
            .pi-bottom{
                top:0;
            }
        }
        .item:nth-child(even){
            .pi-bottom{
                margin-top: 12px;
            }
        }
        .item:first-child{
            margin-left: 2em;
        }
    }
}
// header.vue
#layout-header{
    background:rgba(0,0,0,0);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    min-height: 60px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    .header{
        background:rgba(0,0,0,0);
        position: relative;
        margin-right: auto;
        margin-left: auto;
        max-width: 100%;
        
    }
    .normal-header{
        top: 0;
        margin:0 72px 0 120px;
    }
    .post-header{
        top: -55px;
    }
}
// post.vue
.post{
    background:rgba(0,0,0,0);
    position: relative;
    .container{
        background:rgba(0,0,0,0);
        height:100%;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        max-width: 100%;
        .post-banner{
            margin-bottom: 30px;
            position: relative;
            color: @auxiliaryColor;
            z-index: 1;
            .banner-container{
                .h{
                    font-weight: 700;
                    font-style: normal;
                    font-size: 30px;
                    line-height: 1.200em;
                    margin: 20px 0;
                    color: @auxiliaryColor;
                    opacity: 1;
                    visibility: visible;
                    -webkit-transition: opacity 0.24s ease-in-out;
                    -moz-transition: opacity 0.24s ease-in-out;
                    transition: opacity 0.24s ease-in-out;
                }
                .cell {
                    display: table-cell;
                    vertical-align: middle;
                }
            }
        }
        .content-container{
            position: relative;
            margin-right: auto;
            margin-left: auto;
            text-align: justify;
            .content{
                margin-bottom: 35px;
            }
        }
    }
}
// story.vue
.story{
    background:rgba(0,0,0,0);
    padding-top:20em;
    min-height:calc(~'100vh - 48px');
    position: relative;
    .container{
        position: relative;
        margin-right: auto;
        margin-left: auto;
        text-align: justify;
        width:100%;
        padding:0 30px;
        .content{
            margin-bottom: 35px;
            p{
                color: #52555a;
            }
        }
    }
}
// vblog.vue
.vblog{
    background:rgba(0,0,0,0);
    position: relative;
    *{
      font-family: din;
    }
    .container{
        background:rgba(0,0,0,0);
        height:100%;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
        .blog-items{
            box-sizing: border-box;
            padding-left: 15px;
            padding-right: 15px;
            width: 100%;
            position: relative;
            .article{
              border:0;
              background:rgba(0,0,0,0);
              .line{
                width:40px;
                height:2px;
                background:@auxiliaryColor;
                position: relative;
              }
              .wrap{
                position: relative;
                min-height: 250px;
                cursor: default;
                .content{
                  padding: 20px 0;
                  h4{
                    line-height: 1em;
                    margin: 0 0 15px;
                    font-style: normal;
                    font-size: 24px;
                    opacity: 1;
                    visibility: visible;
                    -webkit-transition: opacity 0.24s ease-in-out;
                    -moz-transition: opacity 0.24s ease-in-out;
                    transition: opacity 0.24s ease-in-out;
                    a{
                      color:#000;
                    }
                    a:hover{
                      color:@mainColor;
                    }
                  }
                  .date{
                    font-size: 12px;
                    color: #c9c9c9;
                    font-weight: 500;
                    margin: 15px 0;
                  }
                  .desc{
                    margin-bottom: 15px;
                    font-size: 14px;
                    line-height: 1.714em;
                  }
                  .read-more{
                    text-decoration: none;
                    font-size: 14px;
                    display: inline-block;
                    color:@mainColor;
                  }
                  .read-more:hover{
                    text-decoration: underline;
                  }
                }
              }
            }
            .article:hover{
              box-shadow:0 0 0 rgba(0, 0, 0, 0);
            }
          }
    }
}
/*                        /components                    */
// carousel.vue
.carousel{
    float: left;
    .panel{
        margin-right: 115px;
        width: 100%;
        height:100%;
        float:left;
        position: relative;
        .owl-outer{
            width:100%;
            height:100%;
            position: relative;
            // overflow:hidden;
            .owl-stage{
                position: relative;
                height:100%;
                -webkit-transition: all 0.5s ease-out;
                -moz-transition: all 0.5s ease-out;
                -o-transition: all 0.5s ease-out;
                -ms-transition: all 0.5s ease-out;
                transition: all 0.5s ease-out;
                .owl-item{
                    position: relative;
                    min-height: 1px;
                    float: left;
                    height:100%;
                    .item{
                        position: relative;
                        overflow: hidden;
                        width:100%;
                        height:100%;
                        .a-img{
                            position: relative;
                            overflow: hidden;
                            width:100%;
                            height:100%;
                            div{
                                position: absolute;
                                top: -5px;
                                left: -5px;
                                right: -5px;
                                bottom: -5px;
                                background-size: cover;
                                background-position: 50%;
                                -webkit-transition: all 0.5s ease;
                                -moz-transition: all 0.5s ease;
                                -o-transition: all 0.5s ease;
                                -ms-transition: all 0.5s ease;
                                transition: all 0.5s ease;
                                img{
                                    float: left;
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }
                        .btn{
                            font-size: 25.35px;
                            position: absolute;
                            left: 0;
                            bottom: 54px;
                            cursor: pointer;
                            text-align: center;
                            color: #52555a;
                            font-weight: bold;
                            -webkit-transition: all 0.3s ease;
                            -moz-transition: all 0.3s ease;
                            -o-transition: all 0.3s ease;
                            -ms-transition: all 0.3s ease;
                            transition: all 0.3s ease;
                            z-index: 1;
                        }
                        .btn:hover{
                            color:@mainColor;
                        }
                        .p-content{
                            left: 0;
                            right: auto;
                            width: 340px;
                            bottom: 0;
                            top: auto;
                            -moz-transform: translate(-100%, 62%);
                            -ms-transform: translate(-100%, 62%);
                            -webkit-transform: translate(-100%, 62%);
                            -o-transform: translate(-100%, 62%);
                            transform: translate(-100%, 62%);
                            padding: 40px 35px 60px;

                            background: @auxiliaryColor;
                            color: @secondaryColor;
                            position: absolute;
                            z-index: 2;
                            -webkit-transition: all 0.6s ease;
                            -moz-transition: all 0.6s ease;
                            -o-transition: all 0.6s ease;
                            -ms-transition: all 0.6s ease;
                            transition: all 0.6s ease;
                            .close{
                                top: 13px;
                                right: 13px;
                                width: 30px;
                                height: 30px;
                                cursor: pointer;
                                position: absolute;
                            }
                            .close:before,.close:after{
                                width: 12px;
                                height: 3px;
                                content: "";
                                display: block;
                                width: 12px;
                                height: 3px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                box-shadow: inset 0 0 0 5px;
                                -moz-transform: translate(-50%, -50%);
                                -ms-transform: translate(-50%, -50%);
                                -webkit-transform: translate(-50%, -50%);
                                -o-transform: translate(-50%, -50%);
                                transform: translate(-50%, -50%);
                                -moz-transform-origin: 0 0;
                                -ms-transform-origin: 0 0;
                                -webkit-transform-origin: 0 0;
                                -o-transform-origin: 0 0;
                                transform-origin: 0 0;
                                -webkit-transition: all 0.3s ease;
                                -moz-transition: all 0.3s ease;
                                -o-transition: all 0.3s ease;
                                -ms-transition: all 0.3s ease;
                                transition: all 0.3s ease;
                            }
                            .close:hover:before{
                                -moz-transform: rotate(45deg) translate(-50%, -50%);
                                -ms-transform: rotate(45deg) translate(-50%, -50%);
                                -webkit-transform: rotate(45deg) translate(-50%, -50%);
                                -o-transform: rotate(45deg) translate(-50%, -50%);
                                transform: rotate(45deg) translate(-50%, -50%);
                                width: 12px;
                            }
                            .close:hover:after{
                                -moz-transform: rotate(135deg) translate(-50%, -50%);
                                -ms-transform: rotate(135deg) translate(-50%, -50%);
                                -webkit-transform: rotate(135deg) translate(-50%, -50%);
                                -o-transform: rotate(135deg) translate(-50%, -50%);
                                transform: rotate(135deg) translate(-50%, -50%);
                                width: 12px;
                            }
                            .w{
                                height: 100%;
                                overflow: hidden;
                                h5{
                                    margin:0;
                                    font-weight: 700;
                                    font-style: normal;
                                    font-size: 24px;
                                    color:@secondaryColor;
                                    opacity: 1;
                                    visibility: visible;
                                    -webkit-transition: opacity 0.24s ease-in-out;
                                    -moz-transition: opacity 0.24s ease-in-out;
                                    transition: opacity 0.24s ease-in-out;
                                }
                                .date{
                                    font-size: 12px;
                                    font-weight: bold;
                                    margin: 10px 0;
                                }
                                p{
                                    font-size: 12px;
                                    line-height: 24px;
                                    margin: 10px 0;
                                }
                            }
                            .link{
                                    font-size: 12px;
                                    font-weight: bold;
                                    position: absolute;
                                    bottom: 30px;
                                    left: 35px;
                                    cursor: pointer;
                                    text-decoration: underline;
                                    color:@secondaryColor;
                            }
                            .link:hover{
                                color:#1890ff;
                            }
                        }
                        .active{
                            -moz-transform: translate(0%, -38%);
                            -ms-transform: translate(0%, -38%);
                            -webkit-transform: translate(0%, -38%);
                            -o-transform: translate(0%, -38%);
                            transform: translate(0%, -38%);
                        }
                    }
                }
            }
        }
        .owl-nav{
            position: absolute;
            bottom: 48px;
            right: -5px;
            color: #52555a;
            width: 65px;
            div{
                width: 55px;
                height: 55px;
                line-height: 55px;
                font-size:25px;
                text-align: center;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }
            .owl-prev{
                cursor: pointer;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                position: absolute;
                bottom:0;
                right:-55px;
            }
            .owl-next{
                position: absolute;
                cursor: pointer;
                left:0;
                bottom:0;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .owl-prev:hover{
                color:@mainColor;
                right:-60px;
            }
            .owl-next:hover{
                color:@mainColor;
                left:-5px;
            }
        }
    }
}
// catalo.vue
.catalo{
    position: absolute;
    top:549px;
    right:60px;
    z-index:1;
    .title{
      position: absolute;
      top: -32px;
      font-size: 20px;
      font-weight: bold;
      left: -20px;
      width: 100%;
      text-align: left;
    }
    .anchor{
      float: left;
    }
  }
//   comment.vue
.comment{
    .post-bottom{
      overflow: hidden;
      border-top: 1px solid #a7abb3;
      padding: 20px 0;
      font-size: 12px;
      text-transform: uppercase;
      position: relative;
      .col{
        display: inline-block;
        margin-right: 20px;
        vertical-align: middle;
        margin: 4px 15px 4px 0;
        *{
          display: inline-block;
          vertical-align: middle;
        }
        span{
          font-weight: lighter;
          i,em{
            float:left;
            font-style: normal;
          }
        }
      }
    }
    #vcomments {
      display:block;
      margin-left:auto;
      margin-right:auto;
    }
  }
//   drawer.vue
.logo{
    height: 31px;
    color:#000;
    margin:75px 28px 16px 0;
    float: left;
    line-height: 31px;
    margin-left: 120px;
    .bars{
      font-size:18px;
      cursor: pointer;
      margin-right: 10px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .bars:hover{
      color:@mainColor;
    }
    .text{
      font-size:1.459em;
      color:#000;
      text-decoration: none;
    }
  }
//   loading.vue
.out{
    -webkit-animation: out 1.3s 1 linear both;
    animation: out 1.3s 1 linear both;
}
@-webkit-keyframes out {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes out {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}
.preloader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: @secondaryColor;
    .preloader-folding-cube {
        margin: 20px auto;
        width: 40px;
        height: 40px;
        position: relative;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
        top: 50%;
        margin-top: -20px;
        .preloader-cube {
            float: left;
            width: 50%;
            height: 50%;
            position: relative;
            -webkit-transform: scale(1.1);
                -ms-transform: scale(1.1);
                    transform: scale(1.1); 
        }
        .preloader-cube2 {
            -webkit-transform: scale(1.1) rotateZ(90deg);
                    transform: scale(1.1) rotateZ(90deg);
        }
        .preloader-cube4 {
            -webkit-transform: scale(1.1) rotateZ(180deg);
                    transform: scale(1.1) rotateZ(180deg);
        }
        .preloader-cube3 {
            -webkit-transform: scale(1.1) rotateZ(270deg);
                    transform: scale(1.1) rotateZ(270deg);
        }
        .preloader-cube2:before {
            -webkit-animation-delay: 0.3s;
                    animation-delay: 0.3s;
        }
        .preloader-cube4:before {
            -webkit-animation-delay: 0.6s;
                    animation-delay: 0.6s;
        }
        .preloader-cube3:before {
            -webkit-animation-delay: 0.9s;
                    animation-delay: 0.9s;
        }
    }
    .preloader-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: @mainColor;
            -webkit-animation: preloader-foldCubeAngle 2.4s infinite linear both;
                    animation: preloader-foldCubeAngle 2.4s infinite linear both;
            -webkit-transform-origin: 100% 100%;
                -ms-transform-origin: 100% 100%;
                    transform-origin: 100% 100%;
        }
        @-webkit-keyframes preloader-foldCubeAngle {
                0%, 10% {
                    -webkit-transform: perspective(140px) rotateX(-180deg);
                            transform: perspective(140px) rotateX(-180deg);
                    opacity: 0; 
                } 25%, 75% {
                    -webkit-transform: perspective(140px) rotateX(0deg);
                            transform: perspective(140px) rotateX(0deg);
                    opacity: 1; 
                } 90%, 100% {
                    -webkit-transform: perspective(140px) rotateY(180deg);
                            transform: perspective(140px) rotateY(180deg);
                    opacity: 0; 
                } 
            }

            @keyframes preloader-foldCubeAngle {
                0%, 10% {
                    -webkit-transform: perspective(140px) rotateX(-180deg);
                            transform: perspective(140px) rotateX(-180deg);
                    opacity: 0; 
                } 25%, 75% {
                    -webkit-transform: perspective(140px) rotateX(0deg);
                            transform: perspective(140px) rotateX(0deg);
                    opacity: 1; 
                } 90%, 100% {
                    -webkit-transform: perspective(140px) rotateY(180deg);
                            transform: perspective(140px) rotateY(180deg);
                    opacity: 0; 
                }
            }
}
// logo.vue
.menu-logo{
    line-height: 64px;
    height:92px;
    border-bottom:0;
    text-align: center;
    position: absolute;
    .site{
        float:left;
        .logo-text{
            font-family:'cycle';
            color:@auxiliaryColor;
            font-size: 32px;
            writing-mode:vertical-lr;
            line-height: 37px;
            z-index:1;
            position: relative;
            text-decoration: none;
            height:110px;
        }
        .circle{
            width:16px;
            height:16px;
            background:@mainColor;
            border-radius:50%;
            position: absolute;
            right:-5px;
            top:5px;
            z-index:-1;
        }
        .circle:after{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: @secondaryColor;
            position: absolute;
            top: 4px;
            left: 4px;
        }
        p{
            color:#a7abb3;
            position: absolute;
            top:73px;
            right:0;
            height:100%;
            font-size: 16px;
            writing-mode:vertical-rl;
            margin-right: 0;
        }
    }
}
.menu-logo-post{
    left:50%;
    top:110px;
    margin-left:-41px;
}
// menu.vue
.menu{
    position: absolute;
    right:0;
    top:80px;
    border-bottom:0;
    .bars{
        font-size:18px;
        cursor: pointer;
        position: absolute;
        right:-52px;
        top:0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .bars:hover{
        color:@mainColor;
    }
    .menu-info{
        line-height: 64px;
        height:92px;
        right:0;
        background:@auxiliaryColor;
        border-bottom:0;
        padding:0 30px;
        span{
            padding:10px 0;
            height:100%;
            text-align: center;
            float:left;
            letter-spacing:4px;
            cursor: pointer;
            position: relative;
            transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
            writing-mode: vertical-rl;
            a{
                font-family:'cycle';
                color:@secondaryColor;
                -webkit-text-stroke: 0.1px @auxiliaryColor;
                text-decoration: none;
                font-size:16px;
                position: relative;
                z-index:1;
                width:100%;
                height:100%;
                display: inline-block;
            }
            .circle{
                width:16px;
                height:16px;
                background:@mainColor;
                border-radius:50%;
                position: absolute;
                right:3px;
                top:18px;
                z-index:0;
                opacity:0;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }
            .circle:after{
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: @auxiliaryColor;
                position: absolute;
                top: 4px;
                left: 4px;
            }
        }
        span:hover{
            .circle{
                opacity:1;
            }
        }
        .check{
            .circle{
                opacity:1;
            }
        }
    }
    .menu-mini-info{
        width:calc(~'100vw - 82px');
        height:15vh;
        right:-51px;
        top:23px;
        background:@auxiliaryColor;
        border-bottom:0;
        position: absolute;
        span{
            height:calc(~'15vh * 0.5 - 10px');
            width:50%;
            line-height: 49px;
            text-align: center;
            float:left;
            position: relative;
            padding:10px 30px;
            .ifont{
                font-size: 20px;
                position: absolute;
                top: 23px;
            }
            a{
                font-family:'cycle';
                color:@secondaryColor;
                -webkit-text-stroke: 0.1px @auxiliaryColor;
                text-decoration: none;
                font-size:16px;
                position: relative;
                z-index:1;
                width:100%;
                height:100%;
                display: inline-block;
            }
            .ding{
                font-size: 16px;
                position: absolute;
                top: 25px;
                right: 30px;
                opacity:0;
            }
        }
        .check{
            .ding{
                opacity:1;
            }
        }
    }
}
// nav.vue
.post-nav{
    display: inline-block;
      a{
        color: #52555a;
        text-decoration: none;
        padding: 2px 10px;
        display: inline-block;
        vertical-align: middle;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;

        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        *{
          display: inline-block;
          vertical-align: middle;
        }
        i{
          position: relative;
          z-index: 1;
          font-size: 20px;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
        }
      }
      a:first-child{
          padding-left:0;
      }
      a:last-child{
          padding-right:0;
      }
      .prev{
        i{
          left:0px;
        }
      }
      .next{
        i{
          right:0px;
        }
      }
      .prev:hover{
        i{
          color:@mainColor;
          left:-5px;
        }
      }
      .next:hover{
        i{
          color:@mainColor;
          right:-5px;
        }
      }
    }
    .comment-nav{
        float:right;
    }
    .other-nav{
        // padding:0 300px;
        width:100%;
        a{
            i{
                font-size: 25px;
            }
        }
        .prev{
            float:left;
        }
        .next{
            float:right;
        }
    }
    // search.vue
    .certain-category-search-wrapper{
        width:100%;
        float:left;
        margin-bottom: 50px;
    }
    .certain-category-search-dropdown{
        *{
            font-family: din;
        }
    }
    .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
      color: #52555a;
    }
    .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title a{
        color: @mainColor;
    }
    .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
      border-bottom: 1px solid #a7abb3;
    }
    
    .certain-category-search-dropdown .ant-select-dropdown-menu-item {
      padding-left: 16px;
    }
    
    .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
      text-align: center;
      cursor: default;
    }
    .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all a {
      color:@mainColor;
    }
    .certain-category-search-dropdown .ant-select-dropdown-menu-item a{
      color: #52555a;
    }
    
    .certain-category-search-dropdown .ant-select-dropdown-menu {
      max-height: 300px;
    }
    .certain-category-search-wrapper  .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
        right: 12px;
      }
      .certain-category-search-wrapper  .certain-search-item-count {
        position: absolute;
        color: #52555a;
        right: 16px;
      }
      .certain-category-search-wrapper  .certain-category-search.ant-select-focused .certain-category-icon {
        color: #52555a;
      }
      .certain-category-search-wrapper  .certain-category-icon {
        color: #52555a;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        font-size: 16px;
      }
    //   side.vue
    .categories{
        background:@secondaryColor !important;
        // flex: 0 0 672px;
        // max-width: 672px;
        // min-width: 672px;
        // width: 672px;
        position: absolute;
        height:calc(~'100% - 65px');
        top:53px;
        .site{
            position: absolute;
            .logo-text{
                font-family:'cycle';
                color:@auxiliaryColor;
                font-size: 32px;
                writing-mode:vertical-lr;
                line-height: 37px;
                z-index:1;
                position: relative;
                text-decoration: none;
            }
            .circle{
                width:16px;
                height:16px;
                background:@mainColor;
                border-radius:50%;
                position: absolute;
                right:-7px;
                top:-7px;
                z-index:-1;
            }
            .circle:after{
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: @secondaryColor;
                position: absolute;
                top: 4px;
                left: 4px;
            }
            p{
                font-family:'cycle';
                color:#a7abb3;
                position: absolute;
                // top:73px;
                // right:0;
                // height:100%;
                font-size: 16px;
                // writing-mode:vertical-rl;
                margin-right: 0;
            }
        }
    }
    // NotFound.vue
    .error{
        background:rgba(0,0,0,0);
        position: relative;
        width:100%;
        height:calc(~'100vh - 64px');
        top:64px;
        .links{
          position: absolute;
          left: 50%;
          top: auto;
          bottom: 20px;
          z-index: 10;
          font-size: 10px;
          text-transform: uppercase;
          white-space: nowrap;
          font-weight: normal;
          -moz-transform: translate(-50%, 0%);
          -ms-transform: translate(-50%, 0%);
          -webkit-transform: translate(-50%, 0%);
          -o-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
          a{
            text-decoration: none;
            margin: 0 15px;
            color: rgb(159, 159, 159);
            position: relative;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            transition: all 0.3s ease;
            font-family: inherit !important;
            i{
              margin-right: 5px;
              font-size: 1.3em;
            }
          }
          a:hover{
            color:@mainColor;
          }
        }
        .banner-404{
          padding:150px 60px 60px 60px;
          color:@secondaryColor;
          height:100%;
          .item{
            background-image:url('/public/images/404.png');
            background-size: cover;
            background-position: 50%;
            position: relative;
            overflow: hidden;
            height:100%;
            .container{
              position: relative;
              margin-right: auto;
              margin-left: auto;
              padding-left: 15px;
              padding-right: 15px;
              max-width: 100%;
              height:100%;
              .cell{
                padding: 60px 0;
                position: relative;
                z-index: 2;
                vertical-align: middle;
                text-align: center;
                top: 50%;
                transform: translateY(-50%);
                .h{
                  font-weight: 600;
                  font-size: 1.500em;
                  text-transform: uppercase;
                  span{
                    font-size: 5.000em;
                    line-height: 1em;
                  }
                }
                p{
                  font-weight: 600;
                  line-height: 1em;
                  margin: 1.6em 0 2em;
                  .backToHome{
                      background:@mainColor;
                      border-color:@mainColor;
                  }
                }
              }
                
            }
            .container:before,.container:after{
                  content: " ";
                  display: table;
              }
              .container:after{
                  clear: both;
              }
              @media (min-width: 768px) {
                  .container {
                      width: 750px;
                  }
              }
              @media (min-width: 992px) {
                  .container {
                      width: 970px;
                  }
              }
              @media (min-width: 1200px) {
                  .container {
                      width: 1170px;
                  }
              }
          }
        }
      }
//首页logo旁的浮窗搜索
.ant-select-auto-complete.ant-select .ant-input:not(:last-child){
    border-color:rgb(217, 217, 217);
}
.ant-input-affix-wrapper:hover .ant-input:not(:last-child){
    border-color:@mainColor;
}
.ant-input:focus{
    box-shadow:0 0 0 2px rgba(233,67,43,0.2);
}
.ant-select-dropdown-menu-item{
    b{
        font-weight: normal;
        font-size: 12px;
        color:@secondaryColor;
        background:@mainColor;
        margin: 0 1px;
        border-radius:100px;
        padding:2px 3px;
    }
}
.ant-select-dropdown-menu-item:hover{
    a{
        color:@mainColor !important;
    }
}
.ant-drawer{
    .ant-drawer-body{
        float: left;
        height:100%;
        #search-box{
            margin-bottom: 35px;
            float:left;
            .ant-select-selection{
                border: none;
                box-shadow: none;
                cursor: text;
            }
        }
        h2{
            float:left;
            width:100%;
        }
        .avatar{
          float:left;
          width:100%;
          margin-bottom: 0.5em;
          img{
              width:100%;
              float:left;
          }      
        }
        .introduce{
            float: left;
            text-align: left;
            line-height:1.5em;
            text-align:justify; 
            text-justify:inter-ideograph;
        }
        .copyright{
            position: absolute;
            bottom:10px;
            font-size:12px;
            text-align: left;
            line-height: 1.5em;
        }
    }
}
//文章内容
.post{
    h1,h2,h3,h4,h5,h6{
        color:@auxiliaryColor;
    }
    p{
        color:#52555a;
    }
}
.ant-anchor-link-active > .ant-anchor-link-title{
    color:@mainColor;
}
.ant-anchor-ink-ball{
    border:2px solid @mainColor;
}
//全局自适应
@media (max-width: 992px) {
    html{
        overflow: auto;
        padding:0;
        margin:0;
        box-sizing: border-box;
        height:100%;
    }
    body{
        height:100%;
        position: relative;
    }
    .carousel{
        width:90%;
        height:53%;
        position: absolute;
        top:33%;
        left:5%;
        .panel{
            .owl-outer{
                overflow: visible;
                .owl-stage{
                    .owl-item{
                        padding:0 10px;
                    }
                }
            }
            .owl-nav{
                display: none;
            }
        } 
    }
    .menu{
        .bars{
            display: block;
        }
        .menu-info{
            display: none;
        }
    }
    .categories{
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 100%;
        width: 100%;
        .site{
            width:calc(~'100% - 40px');
            left:20px;
            top:10px;
            p{
                top:57px;
                height:auto;
                writing-mode:vertical-rl;
                right:0;
            }
        }
    }
    .logo{
        display: none;
    }
    .footer.home{
        padding:0 20px;
    }
    .footer.other{
        padding:0 20px;
    }
    .vblog{
        padding-top:40%;
        .container{
            .blog-items{
                .article{
                    margin-bottom: 0px;
                    .line{
                        left:0px;
                    }
                    .wrap{
                        padding-left:0px;
                        .content{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
    .menu-logo-normal{
        padding:0 25px;
        left:calc(~'-50vw + 80px');
        top:40px;
    }
    .post{
        padding-top:40%;
        .container{
            .post-banner{
                .banner-container{
                    padding:0 30px;
                }
            }
            .content-container{
                padding:0 30px;
            }
        }
    }
    .other-nav{
        padding: 0 30px;
    }
    .gallery{
        padding-top:40%;
        height:auto;
        .container{
            display: none;
        }
        .mini-container{
            display: inline-block;
            background:rgba(0,0,0,0);
            width:100%;
            padding-bottom:72px;
            .item{
                height:200px;
                width:calc(~'100% - 4em');
                display: inline-block;
                margin:0    2em;
                .article{
                    border:0;
                    background:rgba(0,0,0,0);
                    float:left;
                    width:100%;
                    height:100%;
                    cursor: pointer;
                    position: relative;
                    .pi-w{
                        position: relative;
                        height:calc(~'100% - 36px');
                        transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                        a{
                            display: block;
                            position: absolute;
                            height:100%;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background-size: cover;
                            background-position: 50%;
                            z-index: -1;
                            cursor: pointer;
                        }
                    }
                    .pi-w:hover{
                        background:rgba(0,0,0,0.5);
                    }
                    .pi-bottom{
                        padding-top: 10px;
                        position: absolute;
                        width:100%;
                        .h{
                            position: relative;
                            font-size: 14px;
                            padding-left: 10px;
                            padding-right: 15px;
                            line-height: 16px;
                            white-space: nowrap;
                            overflow: hidden;
                            margin-right: 30px;
                            border-left:2px solid @auxiliaryColor;
                            transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                        }
                        .b{
                            position: absolute;
                            right: 0px;
                            top: 5px;
                            font-weight: normal;
                            font-size: 19px;
                            color: #a7abb3;
                            text-align: center;
                            transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                        }
                        .h:hover,.b:hover{
                            color:@mainColor;
                        }
                    }
                }
                .article:hover{
                    box-shadow:0 0 0 rgba(0, 0, 0, 0);
                }
            }
        }
    }
    //swiper
    .swiper{
        width:calc(~'100% - 30px') !important;
        padding:0 15px;
        .swiper-img{
            width:100%;
        }
        .ant-modal-close-x{
            width:30px;
            height:30px;
            line-height: 30px;
        }
    }
}
@media (min-width: 992px) {
    .carousel{
        width:100%;
        height:100%;
        position: relative;
        .panel{
            .owl-outer{
                overflow: hidden;
                .owl-stage{
                    .owl-item{
                        padding:auto;
                    }
                }
            }
            .owl-nav{
                display: block;
            }
        } 
    }
    .menu{
        .bars{
            display: none;
        }
        .menu-info{
            display: block;
        }
    }
    .categories{
        flex: 0 0 672px;
        max-width: 672px;
        min-width: 672px;
        width: 672px;
        .site{
            left:120px;
            width:calc(~'100% - 120px');
            top:50%;
            p{
                top:73px;
                height:100%;
                writing-mode:vertical-rl;
                right:0;
            }
        }
    }
    .logo{
        display: block;
    }
    .footer.home{
        padding-left:120px;
    }
    .footer.other{
        padding:0 132px;
    }
    .vblog{
        padding-top:20em;
        .container{
            .blog-items{
                .article{
                    margin-bottom: 50px;
                    .line{
                        left:70px;
                    }
                    .wrap{
                        padding-left:70px;
                        .content{
                            width: 60vw;
                        }
                    }
                }
            }
        }
    }
    .menu-logo-normal{
        padding:0 25px;
        left:0;
        top:80px;
    }
    .post{
        padding-top:20em;
        .container{
            .post-banner{
                .banner-container{
                    padding:0 300px;
                }
            }
            .content-container{
                padding:0 300px;
            }
        }
    }
    .other-nav{
        padding: 0 300px;
    }
    .gallery{
        padding-top:20em;
        height:calc(~'100vh - 12px');
        .container{
            display: block;
        }
        .mini-container{
            display: none;
        }
    }
    //swiper
    .swiper{
        width:992px !important;
        padding:0 15px;
        .swiper-img{
            width:100%;
        }
        .ant-modal-close-x{
            width:30px;
            height:30px;
            line-height: 30px;
        }
    }
    //story
    .story{
        padding-top:20em;
        .container{
            padding:0 300px;
        }
    }
}
@media (min-width: 1200px) {
    .carousel{
        width:100%;
        height:100%;
        position: relative;
        .panel{
            .owl-outer{
                overflow: hidden;
                .owl-stage{
                    .owl-item{
                        padding:auto;
                    }
                }
            }
            .owl-nav{
                display: block;
            }
        } 
    }
    .menu{
        .bars{
            display: none;
        }
        .menu-info{
            display: block;
        }
    }
    .categories{
        flex: 0 0 672px;
        max-width: 672px;
        min-width: 672px;
        width: 672px;
        .site{
            left:120px;
            width:calc(~'100% - 120px');
            top:50%;
            p{
                top:73px;
                height:100%;
                writing-mode:vertical-rl;
                right:0;
            }
        }
    }
    .logo{
        display: block;
    }
    .footer.home{
        padding-left:120px;
    }
    .footer.other{
        padding:0 132px;
    }
    .vblog{
        padding-top:20em;
        .container{
            .blog-items{
                .article{
                    margin-bottom: 50px;
                    .line{
                        left:70px;
                    }
                    .wrap{
                        padding-left:70px;
                        .content{
                            width: 60vw;
                        }
                    }
                }
            }
        }
    }
    .menu-logo-normal{
        padding:0 25px;
        left:0;
        top:80px;
    }
    .post{
        padding-top:20em;
        .container{
            .post-banner{
                .banner-container{
                    padding:0 300px;
                }
            }
            .content-container{
                padding:0 300px;
            }
        }
    }
    .other-nav{
        padding: 0 300px;
    }
    .gallery{
        padding-top:20em;
        height:calc(~'100vh - 12px');
        .container{
            display: block;
        }
        .mini-container{
            display:none;
        }
    }
    //swiper
    .swiper{
        width:1000px !important;
        padding:0 15px;
        .swiper-img{
            width:100%;
        }
        .ant-modal-close-x{
            width:30px;
            height:30px;
            line-height: 30px;
        }
    }
    //story
    .story{
        padding-top:20em;
        .container{
            padding:0 300px;
        }
    }
}